<script>
export default {
  data() {
    return {
      options: [
        {
          text: '测试1',
          value: '1',
          lable: '选项1'
        },
        {
          text: '测试2',
          value: '2',
          lable: '选项2'
        },
        {
          text: '测试3',
          value: '3',
          lable: '选项3'
        },
        {
          text: '测试4',
          value: '4',
          lable: '选项4'
        },
        {
          text: '测试5',
          value: '5',
          lable: '选项5'
        },
        {
          text: '测试6',
          value: '6',
          lable: '选项6'
        },
        {
          text: '测试7',
          value: '7',
          lable: '选项7'
        },
        {
          text: '测试8',
          value: '8',
          lable: '选项8'
        },
      ],
      options2: [
        {
          text: '测试1',
          value: '1',
          lable: '选项1'
        },
        {
          text: '测试2',
          value: '2',
          lable: '选项2'
        },
        {
          text: '测试3',
          value: '3',
          lable: '选项3'
        },
        {
          text: '测试4',
          value: '4',
          lable: '选项4'
        },
        {
          text: '测试5',
          value: '5',
          lable: '选项5'
        },
        {
          text: '测试6',
          value: '6',
          lable: '选项6'
        },
        {
          text: '测试7',
          value: '7',
          lable: '选项7'
        },
        {
          text: '测试8',
          value: '8',
          lable: '选项8'
        },
      ],
      testModel1: '',
      testModel2: '',
      testModel3: '',
      testModel4: '',
      testModel5: '',
    }
  },
  methods: {
    onchange(value) {
      console.log('1111111', value);
      console.log('testModel1', this.testModel1);
      console.log('testModel2', this.testModel2);
      console.log('testModel3', this.testModel3);
      console.log('testModel4', this.testModel4);
      console.log('testModel5', this.testModel5);
    }
  }
}
</script>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "Select"
  }
}
</route>

<template>
  <view class="text-main">
    <view class="item-view">
      <eui-select label="单选下拉框" @change="onchange" :options="options" v-model="testModel1" textAlignType="left" />
    </view>
    <view class="item-view">
      <eui-select label="多选下拉框" @change="onchange" :options="options2" v-model="testModel2" textAlignType="left" :multiple="true" :collapseTags="true" :collapseTagsNum="3" />
    </view>
  </view>
</template>

<style lang="scss">
.text-main {
  width: 100%;
  height: 1624rpx;
  background: #F2F2F2;
  display: flex;
  flex-direction: column;
  position: relative;
}

.item-view {
  width: 100%;
  height: 88rpx;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}
</style>
